<script setup lang='ts'>
import type { FormInstance, FormRules } from 'element-plus'
import LTUpload from '@/components/element-upload'
import PicUpload from "@/components/base-ui/editor/picUpload.vue";
import Upload from "@/components/base-ui/upload";

import { reactive, ref } from 'vue'
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import { message } from "@/utils/message";
import { getxmoduleController, setxmoduleController } from '@/api/aboutUs'
import { Plus, Delete, Check } from '@element-plus/icons-vue'

const ruleForm = ref([])


const pageType = 3

getxmoduleController(pageType).then(res => {
  console.log(res)
  ruleForm.value = res?.result?.xmodels.map(v => {
    let imgList = []
    let content
    if (v.infotype == 1 && v.info != '') {
      let a = v.info
      let b = a.split(',')
      imgList = b.map(i => {
        return {
          url: i
        }
      })
    }

    if (v.infotype == 0) {
      content = v.info
    }


    v.imgList = imgList
    v.content = content
    return v

  })
})


const submitFn = () => {
  console.log(ruleForm.value, 'ruleForm')
  let Q = ruleForm.value.map(v => {
    if (v.infotype == 1) {
      if (v.imgList.length > 0) {
        let strArr = v.imgList.map(e => {
          if (e.response) {
            return e.response?.data?.result[0].uuid
          } else {
            return e.url
          }
        })

        v.info = strArr.join(',')
      } else {
        v.info = ''
      }
    } else {
      v.info = v.content
    }
    return v
  })
  console.log(Q, 'Q')

  let T = {
    type: pageType,
    xmodels: Q
  }
  setxmoduleController(T).then(res => {
    console.log(res)
  })


}


const loading = ref(true)

const input = ref('')


const addFn = () => {
  ruleForm.value.push({
    name: '',
    img: '',
    info: '',
    infotype: 0,
    content: '',
    imgList: [],
    webid: new Date().getTime(),
  })
}





const updatelValFn = (e) => {
  console.log(e)
}

const delFn = (item) => {
  ruleForm.value = ruleForm.value.filter(v => v.webid != item.webid)
}
</script>

<template>
  <el-card>
    <el-button type="primary" :icon="Plus" @click="addFn">添加</el-button>
    <el-button class="" type="success" :icon="Check" @click="submitFn">确定</el-button>

    <el-card class="mt-5 relative" v-for="(item, index) in ruleForm" :key="item.webid">



      <el-popconfirm title="确认要删除吗?" @confirm="delFn(item)">
        <template #reference>
          <el-button class="absolute right-[10px] top-[10px] z-10" type="danger" :icon="Delete" circle />
        </template>
      </el-popconfirm>

      <el-form-item label="类型">
        <el-switch v-model="item.infotype" class="mb-2" :active-value="0" :inactive-value="1" active-text="富文本"
          inactive-text="图片" />
      </el-form-item>


      <el-form-item label="标题">
        <el-input v-model="item.name" style="width: 240px" placeholder="请输入标题" clearable />
      </el-form-item>
      <el-form-item label="图标">
        <LTUpload uploadType="image" v-model="item.img"></LTUpload>
      </el-form-item>



      <el-form-item label="图片" v-show="item.infotype == 1">
        <Upload v-model="item.imgList" :limit="9" listType="picture-card"></Upload>
      </el-form-item>

      <el-form-item label="内容" v-show="item.infotype != 1">
        <div shadow="never" style="height: 360px;border:1px solid #ccc;">
          <PicUpload v-model:editorValue="item.content" :htmlVal="item.content" @updatelVal="updatelValFn" />
        </div>
      </el-form-item>





    </el-card>




  </el-card>

  <!-- <el-button v-if="ruleForm.length > 0" class="mb-[50px] ml-[20px] mt-[10px]" type="success" :icon="Check"
    @click="submitFn">确定</el-button> -->
</template>

<style lang='scss' scoped></style>
